import { Component, OnInit } from '@angular/core';

import { HeroesService } from './hierachical-DI-heros.service';
import { EditItem } from './hierachical-DI-edit-item';
import { Hero } from './hierachical-DI-Hero';

@Component({
    template: `
    <div>
      <ul>
        <li *ngFor="let editItem of heroes">
          <guide-hero-card
            [hidden]="editItem.editing"
            [hero]="editItem.item">
          </guide-hero-card>
          <button
            [hidden]="editItem.editing"
            (click)="editItem.editing = true">
              edit
          </button>
          <guide-hero-editor
            (saved)="onSaved(editItem, $event)"
            (canceled)="onCanceled(editItem)"
            [hidden]="!editItem.editing"
            [hero]="editItem.item">
          </guide-hero-editor>
        </li>
      </ul>
    </div>
    `
})
export class HierachicalDIHerosListComponent implements OnInit {
    heroes: Array<EditItem<Hero>>;
    constructor(heroesService: HeroesService) {
        this.heroes = heroesService.getHeroes()
            .map(item => new EditItem(item));
    }
    onSaved(editItem: EditItem<Hero>, updatedHero: Hero) {
        editItem.item = updatedHero;
        editItem.editing = false;
    }

    onCanceled(editItem: EditItem<Hero>) {
        editItem.editing = false;
    }
    ngOnInit() { }
}